<template>
	<view class="pay-index">
		<view class="title">
			
			<view v-if="payOptions.order_type == 'centpay'" class="title-price">
				应付金额：<span class="price">¥{{ orderInfo.order_total_money }}</span>
			</view>
			
			<view v-else>
				<view class="title-price">
					应付金额：<span class="price">¥{{ orderInfo.order_total_money_nb }}</span>
				</view>
			</view>
			
			<view class="desc">{{ orderInfo.order_name }}</view>
			
		</view>

		<view class="content">
			<view class="item">
				<view class="left">
					订单编号
				</view>
				<view class="right">
					{{ orderInfo.order_id }}
				</view>
			</view>

			<view class="item">
				<view class="left">
					本月会员可节省 <span class="price">{{ nowUser.cent_money }}</span> 元
					<!-- cent_money -->
				</view>
				<view class="right">
					
				</view>
			</view>

			<view class="item">
				<view class="left">
					<view class="huiyuan"></view>
				</view>
				<view class="center">
					会员可节省
				</view>
				<view v-if="payOptions.order_type == 'centpay'" class="right">
					<span class="price">0</span> 元
				</view>
				<view v-else class="right">
					<span class="price">{{ orderInfo.order_total_money_cent }}</span> 元
				</view>
			</view>

			<view class="item">
				<view class="left">
					<view class="pingtai"></view>
				</view>
				<view class="center">
					平台优惠券
				</view>
				<view class="right">
					无可用优惠券 >
				</view>
			</view>

			<!-- <view class="item">
				<view class="left">
					<view class="yuer"></view>
				</view>
				<view class="center">
					平台余额 <span class="price">¥{{ nowUser.now_money }}</span>
				</view>
				<view class="right">
					<van-checkbox v-model="sumPay" @change="sumPayChange"></van-checkbox>
				</view>
			</view> -->
		</view>

		<view class="pay-type-list" v-if="sumPay">
			<view class="title">
				选择支付方式
			</view>

			<view class="list">
				<view class="item">
					<view class="left">
						<span class="icon iconfont icon-weixin"></span>
					</view>
					<view class="center">
						微信支付
					</view>
					<view class="right">
						<van-checkbox v-model="wxChecked" checked-color="#07c160"></van-checkbox>
					</view>
				</view>
			</view>
		</view>

		<view class="btn-bar">
			<van-button v-if="payOptions.order_type == 'centpay'" round type="danger" @click="paymini">
				去支付 ¥ {{ orderInfo.order_total_money }}
			</van-button>
			<van-button v-else round type="danger" @click="paymini">
				去支付 ¥ {{ orderInfo.order_total_money_nb }}
			</van-button>
		</view>

	</view>
</template>

<script>
	import config from '@/common/scripts/config.js'
	import Storage from '@/common/scripts/storage.js'
	import PayService from './service/service.js'
	import Util from '@/common/scripts/util.js'

	export default {
		beforeCreate() {
			this.service = new PayService()
		},
		data() {
			return {
				name: '平台自营商城',
				switchChecked: true,
				wxChecked: true,
				wxCheckedValue: true,
				sumPay: true,
				sumPayValue: true,
				ticket: null,
				user: null,
				options: null,
				orderInfo: {
					order_total_money: 0,
					order_total_money_cent: 0,
					order_total_money_nb: 0,
					order_name: ''
				},
				nowUser: {
					cent_money: 0,
					now_money: 0
				},
				orderData: {},
				payTypeMap: {
					'mall': 'shop'
				},
				toPayOptions: {},
				payOptions: {
					'order_type': '',
					'order_id': '',
					'pay_type': 'weixin',
					'Device-Id': 'wxapp',
					'card_id': '',
					'ticket': '',
					'app_version': '90',
					'coupon_id': 0,
					'use_score': 0,
					'use_merchant_money': 0,
					'use_balance_money': 0,
					'use_sys_coupon': 0,
					'use_mer_coupon': 0
				}
			}
		},
		onLoad(options) {
			console.log(options)
			let that = this
			that.options = options
			that.payOptions['order_id'] = options['order_id']
			that.payOptions['order_type'] = options['type']
			Storage.get('ticket')
				.then(that.getTicketSuccess).catch(that.getTicketError)
				.then(that.checkSuccess).catch(that.checkError)
				// .then(that.toPaySuccess).catch(that.toPayError)
			Storage.get('user')
				.then(that.getUserSuccess).catch(that.getUserError)
		},
		methods: {
			getOrderInfoSuccess(result) {
				let that = this
				console.log(result)
				if (result.status == 'ok') {
					that.orderData = result.order
					that.orderData['ticket'] = that.ticket
					that.orderData['pay_type'] = "wxapp"
					that.orderData['device'] = "mini"
					that.orderData['order_type'] = that.transPayType(options['type'])
				} else {
					uni.showModal({
						title: '提示',
						content: '获取订单数据失败！',
						success: function(res) {
							console.log(res)
						},
						duration: 3000
					})
				}
				return null
			},
			getOrderInfoError(err) {
				console.log(err)
				return null
			},
			checkSuccess(result) {
				let that = this
				console.log(result)
				if (result.errorCode == 0) {
					if (result && result.hasOwnProperty('result') && result.result) {
						that.orderInfo = result.result.order_info
						that.nowUser = result.result.now_user
						return null
					} else {
						return null
					}
				} else {
					return null
				}
			},
			checkError(err) {
				console.log(err)
				return null
			},
			getTicketSuccess(result) {
				console.log(result)
				let that = this
				if (result && result.errMsg == 'getStorage:ok') {
					that.ticket = result.data
					that.payOptions['ticket'] = that.ticket
					let reqOptions = {
						ticket: that.ticket,
						'Device-Id': 'wxapp',
						app_version: '90',
						app_type: 'wxapp',
						type: that.options['type'],
						order_id: that.options['order_id'],
						merchant_coupon_id: 0,
						use_score: 0,
						use_merchant_money: 0,
						use_balance_money: 0,
						use_sys_coupon: 0,
						use_mer_coupon: 0
					}
					return that.service.toCheck(reqOptions)
				} else {
					return null
				}
			},
			getTicketError(err) {
				console.log(err)
				return null
			},
			getUserSuccess(result) {
				console.log(result)
				if (result && result.errMsg == 'getStorage:ok') {
					this.user = result.data
				}
			},
			getUserError(err) {
				console.log(err)
			},
			transPayType(type) {
				return this.payTypeMap[type] ? this.payTypeMap[type] : 'shop'
			},
			sumPayChange() {
				if (this.sumPayValue) {
					this.sumPay = false
					this.sumPayValue = false
					this.wxChecked = false
					this.wxCheckedValue = false
					this.payOptions['pay_type'] = ''
				} else {
					this.sumPay = true
					this.sumPayValue = true
					this.wxChecked = true
					this.wxCheckedValue = true
					this.payOptions['pay_type'] = 'weixin'
				}
			},
			toMember() {
				let member = {
					g: "Wap",
					c: "Cent",
					a: "index",
					lj_page: "/wap.php"
				}
				Storage.set('back-page', member)
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			payBac(url) {
				let param = Util.urlToObj(url)
				let member = {
					g: param['g'],
					c: param['c'],
					a: param['a'],
					order_id: param['order_id'],
					lj_page: "/wap.php"
				}
				Storage.set('back-page', member)
					.then(function(data) {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					})
					.catch(function(err) {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					})
			},
			payBackSuccess(result) {
				if (result && result.errorCode == 0) {
					this.payBac(result.result)
				} else {
					uni.showModal({
						title: '提示',
						content: '支付失败！',
						success: function(res) {
							console.log(res)
						},
						duration: 3000
					})
				}
			},
			payBackError(err) {
				uni.showModal({
					title: '提示',
					content: '支付失败！',
					success: function(res) {
						console.log(res)
					},
					duration: 3000
				})
			},
			wxPaySuccess(result) {
				console.log(result)
				let that = this
				if (result) {
					let options = {						
						ticket: that.ticket,
						'Device-Id': 'wxapp',
						order_id: that.payOptions['order_id'],
						order_type: that.payOptions['order_type']
					}
					that.service.payBack(options)
						.then(that.payBackSuccess).catch(that.payBackError)
				}
			},
			wxPayError(err) {
				console.log(err)
				uni.showModal({
					title: '提示',
					content: '调取微信支付失败！',
					success: function(res) {
						console.log(res)
					},
					duration: 3000
				})
			},
			toPaySuccess(result) {
				let that = this
				console.log(result)
				if (result && result.result) {
					that.toPayOptions = result.result
					let param = that.toPayOptions.weixin_param
					uni.requestPayment({
						provider: 'wxpay',
						appId: param.appId,
						orderInfo: '',
						timeStamp: param.timeStamp,
						nonceStr: param.nonceStr,
						package: param.package,
						signType: 'MD5',
						paySign: param.paySign,
						success: that.wxPaySuccess,
						fail: that.wxPayError
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '支付失败！',
						success: function(res) {
							console.log(res)
						},
						duration: 3000
					})
				}
			},
			toPayError(err) {
				uni.showModal({
					title: '提示',
					content: '支付失败！',
					success: function(res) {
						console.log(res)
					},
					duration: 3000
				})
				return null
			},
			paymini() {
				let that = this
				uni.getProvider({
					service: 'payment',
					success: function(res) {
						that.payOptions['ticket'] = that.ticket
						// that.payOptions['order_type'] = that.orderInfo['order_type']
						that.payOptions['card_id'] = that.nowUser['cardid']
						that.service.toPay(that.payOptions)
							.then(that.toPaySuccess).catch(that.toPayError)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pay-index {}

	.pay-index .title {
		display: flex;
		text-align: center;
		padding-top: 30upx;
		padding-bottom: 30upx;
		flex-direction: column;
		background: #fff;
		border-bottom: 1upx solid #e5e5e5;
	}

	.pay-index .title .title-price {
		font-size: 32upx;
		color: #333;
	}

	.pay-index .price {
		color: red;
		display: inline-block;
		padding-left: 3upx;
		padding-right: 3upx;
	}

	.pay-index .title .desc {
		color: #999;
		font-size: 28upx;
	}

	.pay-index .content {
		background: #fff;
	}

	.pay-index .content .item {
		display: flex;
		border-bottom: 1upx solid #e5e5e5;
		padding: 28upx 20upx;
	}

	.pay-index .content .item .left {
		text-align: left;
		line-height: 60upx;
	}

	.pay-index .content .item .center {
		line-height: 60upx;
	}

	.pay-index .content .item .right {
		text-align: right;
		flex-grow: 1;
		color: #999;
		line-height: 60upx;
	}

	.pay-index .pay-type-list {}

	.pay-index .pay-type-list .title {
		background: none;
		text-align: left;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.pay-index .pay-type-list .item {
		display: flex;
		border-bottom: 1upx solid #e5e5e5;
		padding: 14upx 20upx;
		background: #FFFFFF;
	}

	.pay-index .pay-type-list .item .icon-weixin {
		color: #05B00C;
		font-size: 48upx;
	}

	.pay-index .pay-type-list .item .center {
		line-height: 48upx;
		flex-grow: 1;
	}

	.pay-index .pay-type-list .item .right {
		line-height: 48upx;
		text-align: right;
	}

	.pay-index .btn-bar {
		margin-top: 50upx;
		text-align: center;
	}

	.pay-index .yuer {
		display: inline-block;
		background: url("/static/imgs/yuer.png") no-repeat;
		background-size: contain;
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
	}

	.pay-index .huiyuan {
		display: inline-block;
		background: url("/static/imgs/huiyuan-new.png") no-repeat;
		background-size: contain;
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
	}

	.pay-index .pingtai {
		display: inline-block;
		background: url("/static/imgs/pingtai.png") no-repeat;
		background-size: contain;
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
	}
</style>
